<template>
	<view class="notice-detail">
		<view class="title">{{ title }}</view>
		<view class="date">{{ date }}</view>
		<view class="goods-content-detail">
			<!-- <rich-text :nodes="detail"></rich-text> -->
			<view class="u-content">
				<u-parse v-if="detail" :content="detail" :lazyLoad="true"></u-parse>
			</view>
		</view>
	</view>
</template>

<script>
	import Fn from '@/common/public.js';
	// import uParse from '@/components/u-parse/u-parse.vue';
	import richTextUtil from '@/common/richTextUtil.js';
	import {
		info
	} from '@/common/api.js';
	export default {
		data() {
			return {
				/* 公告内容 */
				mode: '', // 公告类型
				noticeID: '', // 公告ID
				title: '', // 公告标题
				detail: '', // 公告详情
				date: '', // 公告日期
				// content: '<p>露从今夜白，月是故乡明</p><img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />'
			};
		},
		onLoad(option) {
			/* 获取页面跳转传值 */
			this.noticeID = option.id;
			this.mode = option.mode;
			// console.log(this.noticeID);
			/* 判断页面跳转 */
			this.checkMode();
			this.getNotice();
		},
		onShow() {

		},
		methods: {

			/* 判断从哪个页面跳转 */
			checkMode() {
				if (this.mode == 1) {
					// console.log('公告跳转');
				} else if (this.mode == 2) {
					// console.log('新闻跳转');
				};
			},

			/* 获取公告内容 */
			getNotice() {
				const that = this;
				const params = {
					articleId: that.noticeID
				};
				info(params).then((res) => {
					if (res.status === 1) {
						const result = res.data;
						// console.log(result);
						that.title = result.articleTitle;
						that.date = result.createTime;
						that.detail = richTextUtil.formatRichText(result.articleContent);
						/* .replace(/\<img/g,'<img style="width:100%;height:100%;display:block;"') */
					} else {
						Fn.Toast(res.msg, 3, 1500);
					};
				});
			},

			preview(src, e) {
				// do something
			},
			navigate(href, e) {
				// do something
			}
		}
	}
</script>

<style lang="scss">
	.notice-detail {
		padding: 20rpx 36rpx;

		.title {
			// text-align: center;
			margin-bottom: 10px;
			font-size: 20px;
			font-weight: 600;
		}

		.date {
			// text-align: center;
			margin-bottom: 10px;
			color: #C4C4C6;
			font-size: 14px;
			font-weight: 600;
		}

		.detail {
			color: #C4C4C6;
			line-height: 54rpx;
			font-size: 30rpx;
		}

		.goods-content-detail {
			// height: 600px;
			// padding-top: 20rpx;
			margin-bottom: 115rpx;
		}
	}
</style>
